<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
    <el-aside style="background-color:  #304156;width: 200px;height: 1400px;">
        <img src="imgs/logo.png" width="50px" height="50px"><span style="color: white;position: absolute;left: 60px;top: 20px" @click="handleTabsAdd(0)">鹿途后台管理系统</span>
        <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                background-color=" #304156" text-color="white" @select="handleTabs">
            <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">系统管理</span>
                </template>
                    <el-menu-item index="1-1" >用户管理</el-menu-item>
                    <el-menu-item index="1-2" >角色管理</el-menu-item>
                    <el-menu-item index="1-3" >产品管理</el-menu-item>
                    <el-menu-item index="1-4" >权限管理</el-menu-item>
                    <el-menu-item index="1-5" >数据管理</el-menu-item>
                    <el-menu-item index="1-6" >社区管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title">系统监控</span>
                </template>
                <el-menu-item index="2-1" @click="handleTabsAdd(6)">在线用户</el-menu-item>
                <el-menu-item index="2-2" @click="handleTabsAdd(7)">数据监控</el-menu-item>
                <el-menu-item index="1-3" @click="handleTabsAdd(8)">服务监控</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" >
                <i class="el-icon-document"></i>
                <span slot="title">鹿途官网</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
    <el-container>
        <el-header>
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-dropdown style="float: right">
                <template >
                    <el-avatar src="imgs/header.png" ></el-avatar>
                </template>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item ><el-button @click="location.href='/personal.html'">个人中心</el-button ></el-dropdown-item>
                    <el-dropdown-item ><el-button @click="logout()">退出登录</el-button ></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-input type="text"  style="width: 300px;float: right;right: 20px"
                      auto-complete="off" placeholder="搜索" class="el-input-inner"></el-input>
        </el-header>
        <el-main >
            <el-card style="margin-top: 10px" v-show="menuIndex=='1-1'">
                        <el-card style="height: 80px" >
                            <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 100px">
                                <el-form-item label="用户名称">
                                    <el-input v-model="formInline.user" placeholder="名称"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码">
                                    <el-input v-model="formInline.phone" placeholder="手机号码"></el-input>
                                </el-form-item>
                                <el-form-item label="用户角色">
                                    <el-select v-model="formInline.state" placeholder="角色">
                                        <el-option label="正常" value="normal"></el-option>
                                        <el-option label="在线" value="online"></el-option>
                                        <el-option label="离线" value="outline"></el-option>
                                        <el-option label="禁用" value="forbidden"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <el-row  style="margin-top: 10px">
                            <el-button type="primary">新增</el-button>
                            <el-button type="info">导出</el-button>
                        </el-row>
                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="用户ID"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="用户名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="nickName"
                                    label="昵称">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="手机号码">
                            </el-table-column>
                            <el-table-column
                                    prop="level"
                                    label="用户角色">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column label="操作"  width="200px"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success"
                                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
            </el-card>
            <el-card v-show="menuIndex=='1-2'">
                <el-card style="height: 80px" >
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 100px">
                    <el-form-item label="角色编号">
                        <el-input v-model="formInline.user" placeholder="编号"></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称">
                        <el-input v-model="formInline.phone" placeholder="名称"></el-input>
                    </el-form-item>
                    <el-form-item label="角色状态">
                        <el-select v-model="formInline.state" placeholder="角色">
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="禁用" value="forbidden"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                </el-card>
                <el-row  style="margin-top: 10px">
                    <el-button type="primary">新增</el-button>
                    <el-button type="info">导出</el-button>
                </el-row>
                <el-table
                        :data="authorityData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="角色编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="角色名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="authority"
                            label="权限字符">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="角色状态">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作"  width="200px"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success"
                                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card v-show="menuIndex=='1-3'">
                <el-card style="height: 80px" >
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 100px">
                        <el-form-item label="产品编号">
                            <el-input v-model="formInline.user" placeholder="编号"></el-input>
                        </el-form-item>
                        <el-form-item label=" 产品类型">
                            <el-input v-model="formInline.phone" placeholder="名称"></el-input>
                        </el-form-item>
                        <el-form-item label="日期">
                            <el-select v-model="formInline.state" placeholder="日期">
                                <el-option label="正常" value="normal"></el-option>
                                <el-option label="禁用" value="forbidden"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-row  style="margin-top: 10px">
                    <el-button type="primary">新增</el-button>
                    <el-button type="info">导出</el-button>
                </el-row>
                <el-table
                        :data="roleData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="产品编号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="产品名称">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="产品类型">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="产品状态">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="inventory"
                            label="库存">
                    </el-table-column>
                    <el-table-column
                            prop="sales"
                            label="销量">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="单价">
                    </el-table-column>
                    <el-table-column label="操作"  width="200px"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success"
                                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card v-show="menuIndex=='1-4'">
                <el-card style="height: 80px" >
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 100px">
                        <el-form-item label="权限编码">
                            <el-input v-model="formInline.user" placeholder="编号"></el-input>
                        </el-form-item>
                        <el-form-item label="权限名称">
                            <el-input v-model="formInline.phone" placeholder="名称"></el-input>
                        </el-form-item>
                        <el-form-item label="权限状态">
                            <el-select v-model="formInline.state" placeholder="状态">
                                <el-option label="正常" value="normal"></el-option>
                                <el-option label="禁用" value="forbidden"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-row  style="margin-top: 10px">
                    <el-button type="primary">新增</el-button>
                    <el-button type="info">导出</el-button>
                </el-row>
                <el-table
                        :data="authorityData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="权限编号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="权限编码">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="权限名称">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="权限状态">
                    </el-table-column>
                    <el-table-column label="操作"  width="200px"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success"
                                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-card v-show="menuIndex=='1-5'">
                <el-row  style="margin-top: 10px">
                    <el-button type="info">导出</el-button>
                </el-row>
                <el-table
                        :data="dataArr"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="权限编号"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="权限编码">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="权限名称">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="权限状态">
                    </el-table-column>
                    <el-table-column label="操作"  width="200px"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success"
                                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </el-main>
    </el-container>
    </el-container>

</div>




<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>


<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                isCollapse: true,
                formInline: {
                    user: '',
                    phone: '',
                    state:'',
                    createTime:'',
                    userList:[],
                },
                dataArr:[],
                authorityData:[{id:"1",code:"discount",name:"9折优惠",status:"正常"}],
                roleData:[{id:"1",name:"超级管理员",authority:"admin",status:"正常",createTime:"2022年1月12日"}],
                tableData:[{id:'1',userName:"tom",nickName:"汤姆",phone:1592312312,level:"level3",createTime:"2023年1月12日"}],
                productData:[{id:"1",name:"苏州一日游",categoryName:"一日游",status:"在售",createTime:"2022年1月1日",
                    inventory:"10",sales:"20",date:"2023年12月1日",price:"1000"}],
                editableTabsValue: '2',
                editableTabs: [{title: '用户管理', name: '1'},{title: '角色管理', name: '2'},{title: '产品管理', name: '3'},
                    {title: '权限管理', name: '4'},{title: '数据管理', name: '5'},{title: '在线用户', name: '6'},{title: '数据监控', name: '7'}
                    ,{title: '服务监控', name: '8'}],
                menuIndex: ""
            }
        },
        methods: {
            handleTabs(key,keyPath){
                v.menuIndex=key;
            },
            handleTabsAdd(index){
                v.menuIndex=index;
            },
            handleEdit(index,user){
                console.log(index);
            },
            handleDelete(){
                console.log(index);
            },
            onSubmit() {
               axios.get("/v1/users/selectByAdmin").then(function (response) {
                   userList=response.data.data;
               })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            logout(){
                if(confirm("您确认退出登录吗?")){
                    axios.post("/v1/users/logout").then(function () {
                        localStorage.clear();
                        location.href="/";
                    })

                }

            }
        },

    })
</script>
</body>
</html>